<template>
    <div>
        <el-dialog title='退货管理' :visible.sync="ReturnFormVisible" width="70%" @open='openDialog' @close='closeDialog'>
            <el-steps :active="active" finish-status="success" style="margin-bottom:20px;">
                <el-step title="已申请"></el-step>
                <el-step title="待审核"></el-step>
                <el-step title="已退款"></el-step>
            </el-steps>
            <el-descriptions column="1">
                <el-descriptions-item label="退款用户">{{getReturnDetail.user_name}}</el-descriptions-item>
                <el-descriptions-item label="商品名称">{{getReturnDetail.goods_name}}</el-descriptions-item>
                <el-descriptions-item label="申请时间">{{getReturnDetail.apply_time}}</el-descriptions-item>
                <el-descriptions-item label="退货状态">
                    <el-tag size="small" type="danger" v-if="getReturnDetail.returned_status==1">待审核</el-tag>
                    <el-tag size="small" type="success" v-else>已退款</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="订单信息">
                    <div style="width:50%;">
                        <el-table :data="OrdertableData" style="width:100%" :cell-style="cellStyle" :key="key" border>
                            <el-table-column prop="order_number" label="订单号" width="180">
                            </el-table-column>
                            <el-table-column prop="order_time" label="下单时间" width="180">
                            </el-table-column>
                            <el-table-column prop="order_money" label="订单金额">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="退款金额"><span style="color:red">{{getReturnDetail.order_money}}￥</span>
                </el-descriptions-item>
                <el-descriptions-item label="退款原因">{{getReturnDetail.reason}}</el-descriptions-item>
            </el-descriptions>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="agreeReturn" style="margin-right:20px;" v-if="getReturnDetail.returned_status==1">同意退款</el-button>
                <el-button @click="CancelSub">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>


export default {
    data() {
        return {
            active:'',
            key: '',
            OrdertableData: [],
            ReturnFormVisible: false,
            getReturnDetail: []
        }
    },
    filters: {
        formatDate: function (value, args) {
            var dt = new Date(value);
            if (args == 'yyyy-M-d') {// yyyy-M-d
                let year = dt.getFullYear();
                let month = dt.getMonth() + 1;
                let date = dt.getDate();
                return `${year}-${month}-${date}`;
            } else if (args == 'yyyy-M-d H:m:s') {// yyyy-M-d H:m:s
                let year = dt.getFullYear();
                let month = dt.getMonth() + 1;
                let date = dt.getDate();
                let hour = dt.getHours();
                let minute = dt.getMinutes();
                let second = dt.getSeconds();
                return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
            } else if (args == 'yyyy-MM-dd') {// yyyy-MM-dd
                let year = dt.getFullYear();
                let month = (dt.getMonth() + 1).toString().padStart(2, '0');
                let date = dt.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${date}`;
            } else {// yyyy-MM-dd HH:mm:ss
                let year = dt.getFullYear();
                let month = (dt.getMonth() + 1).toString().padStart(2, '0');
                let date = dt.getDate().toString().padStart(2, '0');
                let hour = dt.getHours().toString().padStart(2, '0');
                let minute = dt.getMinutes().toString().padStart(2, '0');
                let second = dt.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
            }
        }
    },
    methods: {
        cellStyle({ row, colum, rowIndex, columnIndex }) {
            if (columnIndex === 2) {
                return 'color:red'
            }
        },
        CancelSub() {
            this.ReturnFormVisible = false;

            //this.ClearContent();
        },
        openDialog() {
            console.log("打开dialog");
            this.key = Math.random();
            this.getReturnDetail = this.$store.state.returnedDetail;
            if(this.getReturnDetail.returned_status==2){
                this.active=3;
            }else{
                this.active=2;
            }
            this.OrdertableData[0] = this.getReturnDetail;
            console.log('OrdertableData:', this.OrdertableData)
            // let data = JSON.parse(localStorage.getItem('goodsMessage'));
            // console.log(data)
            // if (data) {
            //     this.code = 1;
            //     this.form.id=data.id;
            //     this.isSubmit = true;
            //     this.form.category = data.category;
            //     this.form.name = data.name;
            //     this.form.price = data.price;
            //     this.form.num = data.number;
            //     this.form.image = data.photo;
            //     this.form.sellPoint = data.SellingPoint;
            //     this.form.desc = data.description;
            //     this.$nextTick(()=>{
            //         setTimeout(()=>{
            //             this.$refs.change.editor.txt.html(data.description);
            //         },200)
            //     })
            // }else{
            //     console.log("正常添加商品！")
            // }

        },
        closeDialog() {
            this.ReturnFormVisible = false;
            // this.ClearContent();
            // localStorage.removeItem('goodsMessage')
        },
        ClearContent() {
            // this.$refs.ruleForm.clearValidate();
            // this.form.category = "";
            // this.form.name = "";
            // this.form.price = "";
            // this.form.num = "";
            // this.form.date = "";
            // this.form.time = "";
            // this.form.image = "";
            // this.form.sellPoint = "";
            // this.form.delivery = false;
            // this.form.type = [];
            // this.form.resource = "";
            // this.form.desc = ""
            // this.$refs.change.editor.txt.clear();
        },
        agreeReturn() {
            this.ReturnFormVisible = false;
            let temp = this.$options.filters['formatDate'];
            console.log('getReturnDetail:',this.getReturnDetail.id)
            this.$ajax({
                method: "post",
                url: "/api/agreeReturn",
                params: {handleTime:temp(new Date()),id:this.getReturnDetail.id}
            }).then(res => {
                console.log(res)
                this.$message({
                    message: '同意退款！',
                    type: 'success'
                });
            });
            this.reload();
        },
    },
    inject: ['reload']
}
</script>

<style lang="less" scoped>

</style>